<template>
    <div>

        <h1>门店显示页</h1>
        <input type="text" placeholder="门店名称" v-model="page.name">
        <input type="date" v-model="page.d1">
        <input type="date" v-model="page.d2">
        <select v-model="page.state">
            <option value="null">请选择状态</option> 
            <option value="true">开业</option> 
            <option value="false">闭店</option> 
        </select>
        <input type="button" value="查询" @click="chax">
        <table class="table">
            <thead>

                <tr>
                    <td><input type="checkbox" v-model="isdateqx"  @change="quanxuan"></td>
                    <td>编号</td>
                    <td>店名</td>
                    <td>开店日期 </td>
                    <td>店长名称</td>
                    <td>店长头像</td>
                    <td>店长电话</td>
                    <td>门店特点</td>
                    <td>状态</td> 
                    <td>逻辑删除</td>
                    <td>修改</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="e in data">
                    <td><input type="checkbox"  v-model="dateqx" :value="e.id"></td>
                    <td>{{ e.id }}</td>
                    <td>{{ e.houseName }}</td>
                    <td>{{ moment(e.houseDate).format("YYYY年MM月DD日")}}</td>
                    <td>{{ e.useName }}</td>
                    <td><img :src="'https://localhost:7094'+e.useImg" style="height: 60px; width: 60px;"></td>
                    <td>{{ e.usePhone }}</td>
                    <td>{{ e.houseTD }}</td>
                    <td>{{ e.state?"开业":"闭店" }}</td> 
                    <td><input type="button" value="逻辑删除" @click="luojidelete(e.id)"></td>
                    <td><input type="button" value="修改" @click="update(e.id)"></td>
                </tr>
            </tbody> 
        </table>
    </div>
    总共{{pageinfo.listcount}}页,当前第{{page.pageIndex}}页,总共{{pageinfo.count}}条,每页显示{{page.pageSize}}条
     <input type="button" value="首页" @click="pagefy(1)">
     <input type="button" value="下一页" @click="pagefy(2)">
     <input type="button" v-for="e in pageinfo.listcount" :value="e" @click="fenye(e)">
     <input type="button" value="上一页" @click="pagefy(3)">
     <input type="button" value="尾页" @click="pagefy(4)">
    <input type="number" v-model="page.pageIndex"><input type="button" value="跳转" @click="tiaozhuan">
    <select v-model="page.pageSize" @click="yrl">
        <option value="3">3</option>
        <option value="5">5</option>
        <option value="8">8</option>
    </select>
    <input type="button" value="逻辑删除" @click="luodelete">
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios' 
import { useRouter,useRoute } from 'vue-router'
import {useUserStore} from '../../stores/login'
import moment from 'moment'

const user=useUserStore();
const router=useRouter();
const route=useRoute();

const baocun=()=>{
    if(user.login.name==""){
        alert("您没有登录,请登录");
        router.push({path:"/login"})
    } 
}

//全选反选
const isdateqx=ref(false);
const dateqx=ref([]) 
const quanxuan=()=>{
    if(isdateqx.value)
{ 
    data.value.forEach(e=>{
        dateqx.value.push(e.id);
    })
}
else{
    dateqx.value=[];
}
}
//批量逻辑删除
const luodelete=()=>{
    if(!confirm("确认逻辑删除吗"))
{
return;
}
axios.get("https://localhost:7094/api/House/LouDeleteHouse",{params:{idstring:dateqx.value.toString()}}).then(res=>{
    if(!confirm("确认删除吗"))
 {
   return;
 }
    if(res.data>0)
    {
        alert("删除成功");
        show();
    }
    else{
        alert("删除失败");
        return;
    }
}) 
}

const luojidelete=(val:any)=>{
 if(!confirm("确认删除吗"))
 {
   return;
 }
    axios.delete("https://localhost:7094/api/House/DeleteHouse",{params:{id:val}}).then(res=>{
        if(res.data>0)
    {
        alert("删除成功");
        show();
    }
    else{
        alert("删除失败");
        return;
    }
    })
}


onMounted(()=>{ 
    baocun();
    show();
})

const chax=()=>{
    show();
}
//分页
const pagefy=(val:any)=>{
 
 if(val==1){
     page.value.pageIndex=1
     show()
 }
 if(val==2){
     if(page.value.pageIndex<pageinfo.value.listcount){
         page.value.pageIndex+=1
         show() 
     }
 }
 if(val==3){
     if(page.value.pageIndex>1){
         page.value.pageIndex-=1
         show() 
     }
 }
 if(val==4){
     page.value.pageIndex=pageinfo.value.listcount
     show()
 }

}
const fenye=(val:any)=>{
 page.value.pageIndex=val
  show()
}
//跳转页
const tiaozhuan=()=>{
    if(page.value.pageIndex <= pageinfo.value.listcount  &&  page.value.pageIndex>0 )
    {
        show();
    }
    else
    {
        page.value.pageIndex = 1;
        show();
    } 
}
//页容量
const yrl=()=>{
    page.value.pageIndex=1;
 show();
}

const data=ref([{
      "id": 1,
      "houseName": "string",
      "houseDate": "2025-05-03T09:18:39.043",
      "useName": "string",
      "useImg": "string",
      "usePhone": "string",
      "houseTD": "string",
      "isDelete": true,
      "state": true
    }])
const page=ref({
    pageIndex:1,
    pageSize:3,
    name:"",
    d1:"",
    d2:"",
    state:null,
})

const pageinfo=ref({
    count:0,
    listcount:0
})

const show=()=>{
    axios.get("https://localhost:7094/api/House/ShowHouse",{params:page.value}).then(res=>{
        data.value=res.data.listcount
        
        pageinfo.value.count=res.data.count,
        pageinfo.value.listcount=Math.ceil(pageinfo.value.count/page.value.pageSize)
    })
}

//修改
const update=(val:any)=>{
    router.push({path:"/up",query:{id:val}})
}

</script>

<style scoped>

</style>